<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
		var yx=new Array()
		var yy=new Array();
		for(var i=0;i<100;i++){
			yx[i]=Math.random()*800;
			yy[i]=-1*Math.random()*200;
		}
		var c=document.getElementById("canvas");
		var ctx=c.getContext("2d");
		var img=document.getElementById("image");
		setInterval(function(){
			ctx.clearRect(0,0,c.width,c.height);
			for(var i=0;i<100;i++){
				yy[i] = yy[i] + 10;
				if(yy[i]>800){
					yy[i] = -1*Math.random()*800;
				}
				ctx.drawImage(img,yx[i],yy[i]);
			}
		},50);
		
}
		</script>
		<style type="text/css">
		html,body{
			padding: 0;
			margin: 0;
			
		}
		body{
		
			width: 100%;
			height: 108.7rem;
			background:url("bjt2.png");
			background-size:100% 108.7rem;
			background-repeat: no-repeat;
			
		}
		#canvas{
			width: 100%;
			height: 106rem;
		}
		#image{
			width: 1px;
			height: 2px;
		}
		#xin{
			position:absolute;
			top:40rem;
			left:10rem;
			font-size: 6rem;
		}
		#nian{
			position:absolute;
			top:40rem;
			left:24rem;
			font-size: 6rem;
		}
		#kuai{
			position:absolute;
			top:40rem;
			left:34rem;
			font-size: 6rem;
			
		}
		#le{
			position:absolute;
			top:40rem;
			left:44rem;
			font-size: 6rem;
			
		}
		
		
		
		#bj{
			      width: 100%;
			      height: 108.7rem;
					
					}
		#yun
		{
			       width:20rem;
		    		height: 20rem;
		    		left:0;
					top:0;
					background:url(bj.png);
					background-repeat: no-repeat;
					background-size: 100% 100%;
	position:absolute;
	animation:mymove 5s infinite alternate;
	-webkit-animation:mymove 5s  infinite; /* Safari and Chrome */
}

@keyframes mymove
{
	0% {left:0;}
	50% {left:40rem;}
	100%{left:0;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	0% {left:0;}
	50% {left:40rem;}
	100%{left:0;}
}

</style>
	</head>
	<body>
		
		<canvas id="canvas"></canvas>
		<img src="yuanbao.png" id="image"></image>
		<div id="yun"></div>
		<div id="xin">恭</div>
		<div id="nian">喜</div>
		<div id="kuai">发</div>
		<div id="le">财</div>
		</div>
	</body>
<script type="text/javascript">
					var size = document.body.Screen/30;
					document.body.fontSize = size;
function changeColor1(){ 
				var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; 
				color=color.split("|"); 
				document.getElementById("xin").style.color=color[parseInt(Math.random() * color.length)]; 
				} 
				setInterval("changeColor1()",400);
		       function changeColor3(){ 
				var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; 
				color=color.split("|"); 
				document.getElementById("nian").style.color=color[parseInt(Math.random() * color.length)]; 
				} 
				setInterval("changeColor3()",400);
				function changeColor2(){ 
				var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; 
				color=color.split("|"); 
				document.getElementById("kuai").style.color=color[parseInt(Math.random() * color.length)]; 
				} 
				setInterval("changeColor2()",400);
				function changeColor4(){ 
				var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; 
				color=color.split("|"); 
				document.getElementById("le").style.color=color[parseInt(Math.random() * color.length)]; 
				} 
				setInterval("changeColor4()",400);
				function tz(){
				location='index.html';
			}
			setTimeout('tz()',10000);
</script>
</html>
